import { ref, reactive, watch, computed, onMounted } from 'vue'
import { useSignalR } from '../utils/ws'
import { ElMessage } from 'element-plus'

export default function (cb) {
  let socket = ref<any>(null)
  let qrCode = ref<string>('')
  let dialogTitle = ref<string>('添加账号')
  let addAccountLoading = ref<boolean>(false)
  let dialogTableVisible = ref<boolean>(false)
  let dialogAccountVisible = ref<boolean>(false)
  let userInfo = ref<any>(null)
  let corpLogo = ref<string>('')
  let avatorUrl = ref<string>('')
  let nickName = ref<string>('')
  const authCode = ref<string|number>()
  const isAuthCode = ref<boolean>(false)
  const addAccountFn = async () => {
    addAccountLoading.value = true
    socket.value = useSignalR({
      // url: 'ws/aggregate-client/login',
      url: 'ws/win-tools/login',
      onStart: () => {
        invoke()
      },
      onFail() {
        addAccountLoading.value = false
      }
    })
  }

  const invoke = () => {
    socket.value.invoke('scanCodeLogInit')
    socket.value.on('scanCodeLogin', async (data) => {
      const { messageList: path = '' } = data
      if (path) {
        addAccountLoading.value = false
        qrCode.value = `data:image/gif;base64,${path}`
        dialogTitle.value = '添加账号'
        dialogTableVisible.value = true

      }
    })

    socket.value.on('scanCodeNotice', async (data) => {  // 扫码通知
      const { messageList: { corpLogo: corpLogo_, avatorUrl: avatorUrl_, nickName: nickName_, loginQrcodeStatus } } = data
      console.log('loginQrcodeStatus: ', loginQrcodeStatus);


      // 需要输入验证二维码登录
      if (loginQrcodeStatus === 10) {
        authCode.value = ''
        isAuthCode.value = true
        return
      }

      if (corpLogo_ || avatorUrl_ || nickName_) {
        dialogTableVisible.value = false
        corpLogo.value = corpLogo_
        avatorUrl.value = avatorUrl_
        nickName.value = nickName_
        userInfo.value = data.messageList
        dialogAccountVisible.value = true
      }
    })

    socket.value.on('scanCodeLoginResult', async (data) => {  // 登录结果
      console.log('scanCodeLoginResult - - data - -   ', data)
      const { messageList: { isLoginSuccess, kefuCode, errMessage } } = data
      if (isLoginSuccess) {
        dialogAccountVisible.value = false
        cb && cb(true)
      } else if (kefuCode) {
        // 验证码的情况下弹出message
        if (isAuthCode.value) {
            ElMessage.error(errMessage)
            return
        }
        dialogAccountVisible.value = false
        qrCode.value = `data:image/gif;base64,${kefuCode}`
        dialogTitle.value = '添加客服'
        dialogTableVisible.value = true
      } else {
        ElMessage.error(errMessage)
      }
    })
  }

  const closeDialog = () => {
    qrCode.value = ''
    // socket.value.stop()
    // socket.value = null
  }

  const closeDialogAccount = () => {
    corpLogo.value = ''
    avatorUrl.value = ''
    nickName.value = ''
    userInfo.value = null
    authCode.value = ''
    isAuthCode.value = false
    socket.value.stop()
  }

  const submitAuthCode = () => {
    if (!authCode.value) {
        ElMessage.warning('请输入验证码')
        return
    }
    socket.value.invoke('submitVerifyCode', authCode.value)
  }

  return {
    addAccountFn,
    closeDialog,
    closeDialogAccount,
    qrCode,
    dialogTitle,
    addAccountLoading,
    dialogTableVisible,
    dialogAccountVisible,
    corpLogo,
    avatorUrl,
    nickName,
    userInfo,
    authCode,
    isAuthCode,
    submitAuthCode
  }
}